<template>
  <div class="float-pages">
    <div class="containers" ref="fundChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      capRoamPlant: [
        { name: "河北", item: 12345, value: 12345 },
        { name: "河北1", item: 12345, value: 12345 },
        { name: "河北2", item: 12345, value: 12345 },
        { name: "河北3", item: 12345, value: 12345 },
        { name: "河北4", item: 12345, value: 12345 },
        { name: "河北5", item: 12345, value: 12345 },
        { name: "河北6", item: 12345, value: 12345 },
        { name: "河北7", item: 12345, value: 12345 },
        { name: "河北8", item: 12345, value: 12345 },
        { name: "河北9", item: 12345, value: 12345 }
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    longEllipsis(params) {
      params = params.toString();
      var maxlength = 5;
      if (params.length > maxlength) {
        return params.substring(0, maxlength - 1) + "...";
      } else {
        return params;
      }
    },
    initChart() {
      var myChartDom = this.$refs.fundChart;
      var chartView = this.$echarts.init(myChartDom);
      var datalist = [
        {
          offset: [95, 79],
          symbolSize: 80,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#A370FF" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5B00FF" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          offset: [95, 20],
          symbolSize: 85,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#578FFF" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#1259E6" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          offset: [40, 63],
          symbolSize: 80,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#0FBCFB" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#257AFF" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          symbolSize: 85,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#0EA2FB" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#065BF5" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          symbolSize: 80,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#0EA2FB" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#065BF5" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          symbolSize: 80,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#7E76FF" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#362AFE" // 100% 处的颜色
              }
            ],
            global: false
          }
        },
        {
          symbolSize: 80,
          color: {
            colorStops: [
              {
                offset: 0,
                color: "#578FFF" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#1259E6" // 100% 处的颜色
              }
            ],
            global: false
          }
        }
      ];
      // 处理多于7个项目的数据
      const list = this.capRoamPlant;
      const capsArray = [];
      if (list.length < 6) {
        for (var i = 0; i < list.length; i++) {
          capsArray.push({
            name: list[i].name,
            value: list[i].value,
            item: list[i].item
          });
        }
      } else {
        let valueCount = 0;
        let itemCount = 0;
        for (var k = 6; k < list.length; k++) {
          valueCount += list[k].value;
          itemCount += list[k].item;
        }
        for (var j = 0; j < 6; j++) {
          capsArray.push({
            name: list[j].name,
            value: list[j].value,
            item: list[j].item
          });
        }
        capsArray.push({
          name: "其他",
          value: valueCount,
          item: itemCount
        });
      }
      var datas = [];
      for (var l = 0; l < capsArray.length; l++) {
        var item = capsArray[l];

        var itemToStyle = datalist[l];
        // console.log("🚀 ~ file: FloatingBubbles.vue ~ line 193 ~ initChart ~ itemToStyle", itemToStyle)
        datas.push({
          name: item.name,
          value: item.item,
          symbolSize: 80,
          draggable: true,
          label: {
            align: "center",
            formatter: [
              "{a|" + this.longEllipsis(item.name) + "}",
              "{b|● " + item.value + "}",
              "{c|● " + item.item + "}",
            ].join("\n"),
            rich: {
              a: {
                color: "#fff",
              },
              b: {
                color: "#F8E71C",
                padding: [5, 0, 5, 0],
              },
              c: {
                color: "#50E3C2",
              },
            },
          },
          itemStyle: {
            color: itemToStyle.color,

            // normal: {
            //     color: itemToStyle.color,
            // }
          },
        });
      }
      //   var colorList = ["#ff7f50", "#87cefa", "#da70d6", "#32cd32", "#6495ed"];
      let option = {
        legend: {
          show: true,
          top: 15,
          left: "right",
          data: ["在库SKU种类", "在库件数"],
          itemWidth: 14,
          itemHeight: 10,
          textStyle: {
            fontSize: "12",
            color: ["#F8E71C", "#50E3C2"],
          },
        },
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {},
        //   animationDurationUpdate: function(idx) {
        //       // 越往后的数据延迟越大
        //       return idx * 100;
        //   },
        //   animationEasingUpdate: 'bounceIn',
        series: [
          {
            name: "在库SKU种类",
            type: "graph",
            layout: "force",
            force: {
              repulsion: 180,
              edgeLength: 10,
            },
            roam: true,
            label: {
              normal: {
                show: true,
                textBorderColor: "transparent", //文字描边问题解决
              },
            },
            itemStyle: {
              normal: {
                color: "#F8E71C",
              },
            },
            // data:datas
          },
          {
            name: "在库件数",
            type: "graph",
            layout: "force",
            force: {
              repulsion: 180,
              edgeLength: 10,
            },
            roam: true,
            label: {
              normal: {
                show: true,
                textBorderColor: "transparent", //文字描边问题解决
              },
            },
            itemStyle: {
              normal: {
                color: "#50E3C2",
              },
            },
            data: datas,
          },
        ],
      };
      chartView.clear();
      chartView.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.float-pages {
  width: 1200px;
  height: 500px;
  .containers {
    width: 100%;
    height: 100%;
  }
}
</style>